import SVGSearch from '@mdi/svg/svg/magnify.svg';
import SVGAccount from '@mdi/svg/svg/account.svg';
import { IconInput, knnoInput, Button } from '../imports';

export function InputsPage() {
	let input: IconInput;
	let input2: IconInput;
	return (
		<div>
			<input class={knnoInput} placeholder="Input" required />
			&nbsp;&nbsp;
			<input class={knnoInput} placeholder="Disabled test" disabled />
			&nbsp;&nbsp;
			<IconInput icon={SVGSearch} placeholder="Search" required ref={(ipt) => (input = ipt)} />
			&nbsp;&nbsp;
			<IconInput icon={SVGSearch} disabled placeholder="Disabled test" />
			&nbsp;&nbsp;
			<Button onClick={() => input.setIcon(null)}>Remove Icon</Button>
			&nbsp;&nbsp;
			<Button onClick={() => input.setIcon(SVGAccount)}>Add Icon</Button>
			<p></p>
			<IconInput suffixIcon={SVGSearch} showClear placeholder="Search" required ref={(ipt) => (input2 = ipt)} />
			&nbsp;&nbsp;
			<Button onClick={() => input2.setReadOnly(!input2.readOnly)}>Togger Readonly</Button>
			&nbsp;&nbsp;
			<Button onClick={() => input2.setDisabled(!input2.disabled)}>Togger Disabled</Button>
		</div>
	);
}
